<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js" ><!--<![endif]-->

    <head>
    
        <!-- BEGIN: basic page needs -->
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />
        <title>REDDESIGN - Site Template</title>
        <!-- END: basic page needs -->
        
        <!-- BEGIN: css -->
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
        <link href="css/responsive.css" rel="stylesheet" type="text/css" />
        <link href="css/skin-default.css" rel="stylesheet" type="text/css" />
        <link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
        <!-- END: css -->
            
        <!-- BEGIN: js -->
    	<script type="text/javascript" src="../../ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/modernizr.js"></script> 
        <script type="text/javascript" src="js/respond.js"></script> 
        <script type="text/javascript" src="js/superfish.js"></script>
        <script type="text/javascript" src="js/hoverIntent.js"></script>
        <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
        <script type="text/javascript" src="js/jquery.hoverdir.js"></script>
        <script type="text/javascript" src="js/jquery.quicksand.js"></script>
        <script type="text/javascript" src="js/jquery.tweet.js"></script>
        <script type="text/javascript" src="js/jquery.flexslider.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script> 
        <script type="text/javascript" src="js/main.js"></script>
        <!--[if lt IE 9]><script src="../../html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
        <!-- END: js -->
        
    </head>
    
<body>

<!-- .container -->
<section class="container">


    <!-- #header  -->
    <header id="header">
        <!-- .row -->
        <div class="row">

            <!-- .span3.logo -->
            <div class="span3 logo">
                <a href="index.html" ><img src="images/logo.png" alt="Logo" /></a>
            </div><!-- /.span3.logo -->
            
            <!-- .span9 -->
            <nav class="span9">

                <!-- #menu -->
                <ul id="menu">
                    <li><a href="index.html" data-description="Home Page">Home</a></li>
                    <li><a href="about.html" data-description="About Page">About</a>
                        <ul>
                            <li><a href="team.html">Team</a></li>
                            <li><a href="services.html">Services</a></li>
                            <li><a href="testimonials.html">Testimonials</a></li>
                        </ul>
                    </li>
                    <li><a href="portfolio.html" class="current" data-description="Portfolio Page">Portfolio</a>
                        <ul>
                            <li><a href="portfolio-left.html">Portfolio Left Sidebar</a></li>
                            <li><a href="portfolio-right.html">Portfolio Right Sidebar</a></li>
                            <li><a href="portfolio-single-left.html">Portfolio Single Left</a></li>
                            <li><a href="portfolio-single-right.html">Portfolio Single Right</a></li>
                        </ul>
                    </li>
                    <li><a href="blog-left.html" data-description="Blog Page">Blog</a>
                        <ul>
                            <li><a href="blog-right.html">Blog Right Sidebar</a></li>
                            <li><a href="blog-without.html">Blog Without Sidebar</a></li>
                            <li><a href="blog-single-left.html">Blog Single Left</a></li>
                            <li><a href="blog-single-right.html">Blog Single Right</a></li>
                            <li><a href="blog-single-without.html">Blog Single Without</a></li>
                        </ul>
                    </li>
                    <li><a href="#" data-description="Features Page">Features</a>
                        <ul>
                            <li><a href="scaffolding.html">Scaffolding</a></li>
                            <li><a href="base-css.html">Base CSS</a></li>
                            <li><a href="components.html">Components</a></li>
                            <li><a href="jquery-plugins .html">jQuery plugins</a></li>
                        </ul>
                    </li>
                    <li><a href="contact.html" data-description="Contact Page">Contact</a></li>
                    <li><a href="../../themeforest.net/item/reddesign-html-responsive-portfolio-template/2784878@ref=bingumd" data-description="Purchase">Purchase</a></li>
                </ul><!-- /#menu -->

            </nav><!-- .span9-->

        </div><!-- /.row -->
    </header><!-- /#header  -->


    <!-- #breadcrumb -->
    <ul class="breadcrumb">
        <li><a href="#">Home</a> <span class="divider">/</span></li>
        <li class="active">Portfolio</li>
    </ul><!-- /#breadcrumb -->


    <!-- .row -->
    <div class="row">

        <!-- #page.span9.alignright -->
        <section id="page" class="span9 alignleft da-thumbs">

            <h3 class="title">Our Work <small>Lorem ipsum dolor sit amet</small></h3>

            <!-- /.portfolio-filtrable -->
            <section class="portfolio clearfix">

                <article data-id="id-1" data-type="vimeo">
                    <img src="example/portfolio-h-1.jpg" alt="Images" />
                    <span class="p-text">
                        <h2>Lorem ipsum dolor</h2>
                        <h4>Graphic Design</h4>
                    </span>
                    <div>
                        <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view" title="Lorem ipsum dolor"></a>
                        <a href="portfolio-single" class="portfolio-link"></a>    
                    </div>
                </article>
                
                <article data-id="id-2" data-type="you-tube">
                    <img src="example/portfolio-h-2.jpg" alt="Images" />
                    <span class="p-text">
                        <h2>Lorem ipsum dolor</h2>
                        <h4>Print Design</h4>
                    </span>
                    <div>
                        <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                        <a href="portfolio-single" class="portfolio-link"></a>    
                    </div>
                </article>
                
                <article data-id="id-3" data-type="images">
                    <img src="example/portfolio-h-3.jpg" alt="Images" />
                    <span class="p-text">
                        <h2>Lorem ipsum dolor</h2>
                        <h4>Branding</h4>
                    </span>
                    <div>
                        <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                        <a href="portfolio-single" class="portfolio-link"></a>    
                    </div>
                </article>
                
                <article data-id="id-4" data-type="slider">
                    <img src="example/portfolio-h-4.jpg" alt="Images" />
                    <span class="p-text">
                        <h2>Lorem ipsum dolor</h2>
                        <h4>Motion Graphics</h4>
                    </span>
                    <div>
                        <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                        <a href="portfolio-single" class="portfolio-link"></a>                
                    </div>
                </article>

                <article data-id="id-5" data-type="vimeo">
                    <img src="example/portfolio-h-5.jpg" alt="Images" />
                    <span class="p-text">
                        <h2>Lorem ipsum dolor</h2>
                        <h4>Motion Graphics</h4>
                    </span>
                    <div>
                        <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                        <a href="portfolio-single" class="portfolio-link"></a>    
                    </div>
                </article>
                
                <article data-id="id-6" data-type="you-tube">
                    <img src="example/portfolio-h-6.jpg" alt="Images" />
                    <span class="p-text">
                        <h2>Lorem ipsum dolor</h2>
                        <h4>Branding</h4>
                    </span>
                    <div>
                        <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                        <a href="portfolio-single" class="portfolio-link"></a>    
                    </div>
                </article>
                
                <article data-id="id-7" data-type="slider">
                    <img src="example/portfolio-h-7.jpg" alt="Images" />
                    <span class="p-text">
                        <h2>Lorem ipsum dolor</h2>
                        <h4>Print Design</h4>
                    </span>
                    <div>
                        <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                        <a href="portfolio-single" class="portfolio-link"></a>    
                    </div>
                </article>
                
                <article data-id="id-8" data-type="images">
                    <img src="example/portfolio-h-8.jpg" alt="Images" />
                    <span class="p-text">
                        <h2>Lorem ipsum dolor</h2>
                        <h4>Graphic Design</h4>
                    </span>
                    <div>
                        <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                        <a href="portfolio-single" class="portfolio-link"></a>    
                    </div>
                </article>

                <article data-id="id-9" data-type="images">
                    <img src="example/portfolio-h-1.jpg" alt="Images" />
                    <span class="p-text">
                        <h2>Lorem ipsum dolor</h2>
                        <h4>Graphic Design</h4>
                    </span>
                    <div>
                        <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view" title="Lorem ipsum dolor"></a>
                        <a href="portfolio-single" class="portfolio-link"></a>    
                    </div>
                </article>
                
            </section><!-- /.portfolio-filtrable -->

            <!-- .pagination -->
            <div class="pagination">
                <ul>
                  <li class="disabled"><a href="#">&laquo;</a></li>
                  <li class="active"><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">&raquo;</a></li>
                </ul>
            </div><!-- /.pagination -->
            
        </section><!-- /#page.span9.alignright -->
        
        <!-- #sidebar.span3.alignleft -->
        <aside id="sidebar" class="span3 alignright">

            <!-- .widget -->
            <div class="widget">
                <h3 class="title">Filter</h3>

                <ul class="menu-filtrable">
                    <li class="current all"><a href="#">All</a></li>
                    <li class="images"><a href="#">Images</a></li>
                    <li class="slider"><a href="#">Slider</a></li>
                    <li class="you-tube"><a href="#">YouTube</a></li>
                    <li class="vimeo"><a href="#">Vimeo</a></li>
                </ul>
                
            </div><!-- /.widget -->

            <!-- .widget -->
            <div class="widget">

                <h3 class="title">Latest Post</h3>

                <ul class="latest-post">
                    <li class="clearfix">
                        <img src="images/post-format/latest-video.png" alt="Images">
                        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing elit</a>
                        <span class="date">June 30, 2012</span>
                    </li>
                    <li class="clearfix">
                        <img src="images/post-format/latest-standart.png" alt="Images">
                        <a href="#">Lorem ipsum dolor sit amet</a>
                        <span class="date">June 30, 2012</span>
                    </li>
                    <li class="clearfix">
                        <img src="images/post-format/latest-gallery.png" alt="Images">
                        <a href="#">Lorem ipsum dolor sit amet consectetur elit</a>
                        <span class="date">June 30, 2012</span>
                    </li>
                    <li class="clearfix">
                        <img src="images/post-format/latest-quote.png" alt="Images">
                        <a href="#">Lorem ipsum dolor sit amet adipiscing</a>
                        <span class="date">June 30, 2012</span>
                    </li>
                    <li class="clearfix">
                        <img src="images/post-format/latest-aside.png" alt="Images">
                        <a href="#">Lorem ipsum dolor sit amet adipiscing</a>
                        <span class="date">June 30, 2012</span>
                    </li>
                </ul>
                
            </div><!-- /.widget --> 

            <!-- .widget -->
            <div class="widget">
                
                <h3 class="title">Latest Tweets</h3>

                <div id="sidebar-tweet" class="tweet"></div> 

                <script type="text/javascript">
                    $(document).ready(function(){
                       //TWITTER
                        $("#sidebar-tweet").tweet({
                              join_text: "auto",
                              username: "envato",
                              avatar_size: 0,
                              count: 3,
                              auto_join_text_default: "we said,",
                              auto_join_text_ed: "we",
                              auto_join_text_ing: "we were",
                              auto_join_text_reply: "we replied",
                              auto_join_text_url: "we were checking out",
                              loading_text: "loading tweets..."
                        });
                    });
                </script>

            </div><!-- /.widget -->
            
        </aside><!-- /#sidebar.span3.alignleft -->

    </div><!-- /.row -->


    <!-- #footer.container -->
    <footer id="footer" class="container">
        
        <!-- .row .clearfix -->
        <div class="row clearfix">

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">About Us</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris. Donec vel felis metus, et laoreet enim. Donec congue nunc sit amet lacus lacinia pretium.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</p>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">Latest Tweets</h3>

                <div class="tweet"></div> 

                <script type="text/javascript">
                    $(document).ready(function(){
                       //TWITTER
                        $(".tweet").tweet({
                              join_text: "auto",
                              username: "envato",
                              avatar_size: 0,
                              count: 2,
                              auto_join_text_default: "we said,",
                              auto_join_text_ed: "we",
                              auto_join_text_ing: "we were",
                              auto_join_text_reply: "we replied",
                              auto_join_text_url: "we were checking out",
                              loading_text: "loading tweets..."
                        });
                    });
                </script>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">Recent Post</h3>

                <ul>
                    <li class="first">
                        <span class="date">April 18, 2012</span>
                        <a href="default.htm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</a>
                    </li>


                    <li>
                        <span class="date">April 18, 2012</span>
                        <a href="default.htm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</a>
                    </li>
                </ul>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">
                
                <h3 class="title">Follow Us</h3>

                <!-- .social -->
                <ul class="social">
                    <li class="twitter"><a href="#">twitter</a></li>
                    <li class="facebook"><a href="#">facebook</a></li>
                    <li class="dribbble"><a href="#">dribbble</a></li>
                    <li class="vimeo"><a href="#">vimeo</a></li>
                    <li class="flickr"><a href="#">flickr</a></li>
                    <li class="pinterest"><a href="#">pinterest</a></li>
                </ul><!-- /.social -->

            </div><!-- /.span3 -->

        </div><!-- /.row .clearfix -->

        <!-- #copyright.clearfix -->
        <div id="copyright" class="clearfix">

            <p>Copyright 2012. All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></p>

            <!-- #footer-menu -->
            <nav id="footer-menu">
                <ul class="clearfix">
                    <li><a href="#" class="current" data-description="Home Page">Home</a>
                    </li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav><!-- /#footer-menu -->

        </div><!-- /#copyright .clearfix -->

    </footer><!-- /#footer .container -->


</section><!-- /.container -->


</body>
</html>